<template>
<div class="mywallet">
    <wxc-minibar title="收支明细">
    </wxc-minibar>
    
    <scroller class="scroller" style="position:fixed;top:90px;bottom:0;left:0;right:0;" >
            <div class="i_e_list" v-for="(item,index) in in_ex_list" :key="index" >
                <div class="showtab" @click="tabactive(item,index)">
                    <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;margin-left:32px;">{{item.date}}</text>
                    <!-- <div class="arrowposition" :style="{opacity: !item.status ? 1: 0}">
                        <image style="width:40px;height:40px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/in-down.png"></image>
                    </div> -->
                    <div class="arrowposition">
                        <image v-if="item.status" style="width:40px;height:40px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/in-up.png"></image>
                        <image v-else style="width:40px;height:40px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/in-down.png"></image>
                    </div>
                </div>
                <div class="showlist" v-if="item.status">
                    <div class="showlist_item" v-for="(item1,index1) in item.list" :key="index1">
                        <div class="showlist_icon" :style="{'background-color':filterClass(item1.type,item1.direction).color}">
                            <text class="showList_txt">{{filterClass(item1.type,item1.direction).txt}}</text>
                        </div>
                        <div class="showlist_itemWrap">
                            <div class="showlist_item_fl">
                                <text style="font-family: PingFangSC-Medium;font-size: 32px;color: #333333;">{{item1.typeStr}}</text>
                                <text style="font-size: 26px;color: #999999;margin-top:10px;">{{item1.detail}}</text>

                            </div>
                            <div class="showlist_item_fr">
                                <text v-if="item1.direction=='IN'" style="font-family: PingFangSC-Medium;font-size: 36px;color: #333333;">+{{item1.money}}</text>
                                <text v-if="item1.direction=='OUT'" style="font-family: PingFangSC-Medium;font-size: 36px;color: #333333;">-{{item1.money}}</text>
                                <text style="font-size: 26px;color: #999999;margin-top:10px;">{{item1.createTime | filtertime}}</text>

                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="norecord" v-if="norecord">
                <image style="width:298.5px;height:298.5px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/norechargerecord.png"></image>
                <text style="font-size: 40px;color: #9E8383;margin-top:75.7px;">暂无收支记录</text>
            </div>
         <loading class="loading"  @loading="loadmore()"  :display="loadinging ? 'show' : 'hide'">
            <rotate></rotate>
        </loading>
    </scroller>
    
</div>
</template>

<script>
const modal = weex.requireModule("modal");
import {
    WxcMask
} from "weex-ui";
import {
    Utils
} from "weex-ui";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js";
import { yearMonthdate } from "@/utils";
import {getBaseUrl, serialize } from "@/utils/index.js";
import { postResponsesToken } from "@/api.js";
import rotate from "@/components/modules/rotate";
export default {
    data() {
        return {
			saveDate:[],
            homeContentStyle: {},
            in_ex_list: [],
            norecord:true,
            alertCode: false,
            current: 1,
            size: 10,
            date: yearMonthdate(),
            content: "",
            loadinging:false
        };
    },
    components: {
        WxcMask,
        WxcMinibar,
        rotate
    },
    filters: {
        filtertime(time) {
            let date = new Date(+time);
            let formatNum = (num) => { return num < 10 ? "0" + num : num.toString() }
            return `${formatNum(date.getMonth() + 1)}-${formatNum(date.getDate())} ${formatNum(date.getHours())}:${formatNum(date.getMinutes())}`
        },
    },
    mounted() {
        const tabPageHeight = Utils.env.getPageHeight()
        this.homeContentStyle = {
            height: tabPageHeight - 112 + "px"
        };
    },
    created() {
		this.baseURL = getBaseUrl(weex.config.bundleUrl, true);
		
		this.initialize()
  
    },
    methods: {
        //数组倒序排序
        sortArr(a,b){
            return b.date-a.date
        },

         filterClass(type, name) {
            let iarr = {
                  '1IN':{
                    'color':'#F97D3B',
                    'txt':'入'
                  },
                   '2IN':{
                    'color':'#E53935',
                    'txt':'奖'
                  },
                  '3IN':{
                    'color':'#ED6137',
                    'txt':'返'
                  },
                   '4IN':{
                    'color':'#ED6137',
                    'txt':'返'
                  },
                   '5IN':{
                    'color':'#F97D3B',
                    'txt':'入'
                  },
                   '6IN':{
                    'color':'#F97D3B',
                    'txt':'入'
                  },
                  '1OUT':{
                      'color':'#33A145',
                      'txt':'提'
                  },
                  '2OUT':{
                      'color':'#66BB6A',
                      'txt':'买'
                  },
                  '3OUT':{
                      'color':'#459F8A',
                      'txt':'出'
                  },
                  '4OUT':{
                      'color':'#459F8A',
                      'txt':'出'
                  },
                  '5OUT':{
                      'color':'#66BB6A',
                      'txt':'买'
                  }
            }
            if(iarr[type+name]){
                 return iarr[type+name];
            }else{
                if(name=="IN"){
                    return{
                        'color':'#F97D3B',
                         'txt':'入'
                    }
                }else{
                     return{
                        'color':'#459F8A',
                         'txt':'出'
                    }
                }
            }
              
            },
		async getMonths(param) {
			return await postResponsesToken('cash/maccount/cashHistory', param)
		},


		async initialize() {
            let self=this;
         
			let param = {
				type:0,
				size:self.size,
				current:self.current,
				
			}

            let data =  await this.getMonths(param);
            let arr = Object.keys(data.data).length;
			if( data.code === 0 && arr>0) {
                this.norecord = false ;
                let obj=data.data;
               Object.keys(obj).forEach(function(key,index){
                  
                    if(obj[key].length>0){
                          self.in_ex_list[index]={
                            date: key,
                            status:true,
                            loadingflag: false,
                            list:obj[key],
                          
					    }
                    }
                    // else{
                    //     self.in_ex_list[index]= {
                    //         date: key,
                    //         status:false,
                    //         loadingflag: false,
                    //         list:[],
                          
					//     }
                    // }
                })
                
                self.in_ex_list.sort(self.sortArr);
              
				
			} 
		},

		async tabactive(item, index) {
            let self=this;
			item.status = !item.status
             self.in_ex_list[index].status=item.status;
            this.$set( self.in_ex_list,index, self.in_ex_list[index]);
             
        },
         //过滤上次删除的数据,找出相同的项
        filterLocalArr(arr){
            let self=this;
            let localArrIds = [];
            self.in_ex_list.forEach(item => {
                localArrIds.push(item.date);
            });
         
             Object.keys(arr).forEach(key => {
                  let len=self.in_ex_list.length;
                if(!localArrIds.includes(key)){//不包含当前月份
                      self.in_ex_list[len]={
                                    date: key,
                                    status:true,
                                    loadingflag: false,
                                    list: arr[key],
                                }
                }else{//包含当前月份，需拼接
                let index1=localArrIds.indexOf(key);
                    self.in_ex_list[index1]={
                                    date: key,
                                    status:true,
                                    loadingflag: false,
                                    list: self.in_ex_list[index1].list.concat(arr[key]),
                                
                                }
                }
            });
            self.in_ex_list.sort(self.sortArr);//进行倒序排序
    },
        async loadmore() {
            let self=this;
            if(self.in_ex_list.length==0){
                 this.norecord = true;
            }
            this.loadinging = true
            self.current++;
            console.log( self.current);
            let param = {
                current:self.current,//页面
				size: self.size,//多少条
				type:0
			};
                let data =  await this.getMonths(param);
                 let arr = Object.keys(data.data).length;
                if( data.code === 0 && arr>0) {
                    this.norecord = false ;
                    let obj=data.data;
                    self.filterLocalArr(obj);
                    this.loadinging = false;

            }
        }
    }
};
</script>

<style scoped>
.i_e_list{
    margin-bottom:24px;
}
.indicator-text {
    color: #888888;
    font-size: 42px;
    text-align: center;
}

.indicator {
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: blue;
}
.showList_txt{
    color:#fff;
    font-size:40px;
    text-align: center;
    height:84px;
    line-height: 84px;
}
.showlist_itemWrap{
    width:580px;
    height: 168px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color:#DCDCDC;
    margin-left:20px;
    flex-direction: row;
}
.showlist_icon{
    width:84px;
    height:84px;
    border-radius: 50%;
    background-color:#66BB6A;
    align-content: center;
    justify-content: center;
}
.loading {
    width: 750px;
    height: 100px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    background-color: #333;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    background-color: #f5f5f5;
}

.mywallet {
  
    background-color: #f5f5f5;
}

.wallet_info {
    width: 686px;
    height: 240px;
    margin-top: 24px;
    margin-left: 32px;
    margin-right: 32px;
    /* background-color: #FFFFFF; */
    display: flex;
    flex-direction: row;
}

.wallet_info_item {
    background-color: #ffffff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 228px;
}

.wallet_info_item_md {
    position: relative;
}

.left_line {
    position: absolute;
    top: 120px;
    margin-top: -21px;
    left: 0;
    width: 2px;
    height: 43px;
    background-color: #d1d1d1;
}

.right_line {
    position: absolute;
    top: 120px;
    margin-top: -21px;
    right: 0;
    width: 2px;
    height: 43px;
    background-color: #d1d1d1;
}

.wallet_list_item {
    width: 750px;
    height: 112px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #d8d8d8;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
}

.wallet_list {
    margin-top: 24px;
}

.flex_lf {
    display: flex;
    flex-direction: row;
    margin-left: 32px;
    align-items: center;
}

.flex_rt {
    display: flex;
    flex-direction: row;
    margin-right: 32px;
}

.showtab {
    height: 80px;
    display: flex;
    
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: rgb(245, 245, 245);
   
}

.showlist_item {
    padding-left:32px;
    padding-right:32px;
    height: 168px;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    align-items: center;
}

.showlist_item_fl {
  padding-top:40px;
  width:380px;
}


.showlist_item_fr {
     padding-top:40px;
    flex-direction: column;
    align-items: flex-end;
    width:200px;
    
}

.arrowposition {
    /* position: absolute;
    top: 50%;
    margin-top: -20px;
    left:170px; */
    width:40px;
    height:40px;
}



.norecord {
    display: flex;
    justify-content: center;
    margin-top: 164.8px;
    align-items: center;
}

.clickmore {
    height: 100px;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: row;

}
</style>
